<template>
	<view class="page" v-if="type != '机构'">
		<view class="hot">
			<view class="hot_title">
				热门教程
			</view>
			<view class="hot_content">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view v-for="(item,index) in hotClassList" :key="index" id="index" class="hot_item" @click="jumpToVideo(item)">
						<image :src="item.poster" mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="classify">
			<view class="classify_title">
				课程分类
			</view>
			<scroll-view scroll-x="true" style="white-space: nowrap;" enable-flex="true">
				<view class="classify_content">
					<view class="classify_item" @click="jumpToCourse('钢琴')">
						<image src="../../static/piano.png" mode=""></image>
						<view>钢琴</view>
					</view>
					<view class="classify_item" @click="jumpToCourse('吉他')">
						<image src="../../static/guitar.png" mode=""></image>
						<view>吉他</view>
					</view>
					<view class="classify_item" @click="jumpToCourse('架子鼓')">
						<image src="../../static/drum.png" mode=""></image>
						<view>架子鼓</view>
					</view>
					<view class="classify_item" @click="jumpToCourse('声乐')">
						<image src="../../static/other.png" mode=""></image>
						<view>声乐</view>
					</view>
					<view class="classify_item" @click="jumpToCourse('古筝')">
						<image src="../../static/zheng.png" mode=""></image>
						<view>古筝</view>
					</view>
					<view class="classify_item" @click="jumpToCourse('非洲鼓')">
						<image src="../../static/africanDrum.png" mode=""></image>
						<view>非洲鼓</view>
					</view>
					<view class="classify_item" @click="jumpToCourse('主持')">
						<image src="../../static/vocal.png" mode=""></image>
						<view>主持</view>
					</view>
					<view class="classify_item" @click="jumpToCourse('尤克里里')">
						<image src="../../static/kerry.png" mode=""></image>
						<view>尤克里里</view>
					</view>
				</view>
			</scroll-view>
			<!-- 已购课程 -->
			<view class="buyClass" v-if="buyClassList.length > 0">
				<view class="buyClass_title">
					已购课程
				</view>
				<view class="buyClass_content">
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
						<view v-for="(item,index) in buyClassList" :key="index" id="index" class="buyClass_item">
							<image :src="item.imageUrl" @click="jumpToVideo(item)"></image>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>

	<!-- 教研页面 -->
	<view class="page" v-else>
		<view class="top">
			<image :src="imageUrl"></image>
		</view>
		<view class="main">
			<view class="card"  @click="jumpToClassManage('schedule')">
				<text>课表管理</text>
			</view>
			<!-- 这部分暂时隐藏起来吧 -->
			<!-- <view class="card" @click="jumpToClassManage('homework')">
				<text>作业管理</text>
			</view> -->
			<view class="card" @click="jumpToAddCourse()" > <!-- v-if="power == 'ADMIN'" -->
				<text>课程管理</text>
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	const dbCmd = db.command;
	let that, courseId = [];
	export default {
		data() {
			return {
				type: getApp().globalData.userInfo.type,
				// type:'机构',
				power:getApp().globalData.userInfo.power,
				fileList: ["cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/吉他/吉他1.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/架子鼓/架子鼓2.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/吉他/吉他3.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/架子鼓/架子鼓5.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/钢琴/钢琴1.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/吉他/吉他4.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/架子鼓/架子鼓8.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/贝斯/贝斯1.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/贝斯/贝斯3.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/钢琴/钢琴3.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/贝斯/贝斯5.jpg",
					"cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/钢琴/钢琴2.jpg"
				],
				hotClassList: [],
				buyClassList: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 机构端
				imageList: ['cloud://inspace-v1.696e-inspace-v1-1302892928/staticImage/蒙版组 49.png'],
				imageUrl: ''
			}
		},
		onShow() {
			this.type = getApp().globalData.userInfo.type;
			this.power = getApp().globalData.userInfo.power;
			// 获取所在机构拥有的课程id
			if(courseId.length == 0) {
				that.getCoursesId();
			}
		},
		onLoad() {
			that = this;
			this.type = getApp().globalData.userInfo.type;
			// 获取热门课程
			that.getHotCourse();
		},
		created() {
			// this.getUrl();
			this.getImageUrl();
		},
		methods: {
			getCoursesId: function() {
				console.log(getApp().globalData.userInfo.type);
				let userType = getApp().globalData.userInfo.type;
				// 获取用户加入的班级
				if(userType == '学生') {
					db.collection('class').where({
						institutionId: getApp().globalData.userInfo.institutionId,
						students: dbCmd.all([getApp().globalData.userInfo.openId])
					}).field({courses: true}).get().then(res => {
						let result = res.data;
						result.forEach(items => {
							let courses = items.courses;
							courses.forEach(item => {
								courseId.push(item._id);
							})
						})
						// 获取已购课程
						that.getBuyCourse();
					})
				}else {
					db.collection('class').where({
						institutionId: getApp().globalData.userInfo.institutionId,
						teacher: getApp().globalData.userInfo.openId
					}).field({
						courses: true
					}).get().then(res => {
						// console.log(res.data);
						let result = res.data;
						result.forEach(items => {
							let courses = items.courses;
							courses.forEach(item => {
								courseId.push(item._id);
							})
						})
						// 获取已购课程
						that.getBuyCourse();
					})
				}

				// console.log(courseId);
			},
			getBuyCourse: function() {
				db.collection('course').where({
					status: '已发布',
					_id: dbCmd.in(courseId)		// 筛选出机构拥有的课程
				}).get().then(res => {
					// console.log(res)
					that.buyClassList = res.data;
					// 获取图片链接
					res.data.forEach(item=>{
						cloudbase.getTempFileURL({
							fileList: [item.imageUrl]
						}).then(res => {
							item.imageUrl = res.fileList[0].fileID;
							console.log(res.fileList[0].fileID);
						});
					})
				})
			},
			getHotCourse: function() {
				db.collection('course').where({
					status: '已发布',
					hot: true
				}).get().then(res=>{
					that.hotClassList = res.data;
					// 获取图片链接
					res.data.forEach(item=>{
						cloudbase.getTempFileURL({
							fileList: [item.poster]
						}).then(res => {
							item.poster = res.fileList[0].tempFileURL
						});
					})
				})
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			jumpToVideo: function(item) {
				if (getApp().globalData.userInfo.openId != '') {
					uni.navigateTo({
						url: '../video/video?item=' + JSON.stringify(item)
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			jumpToCourse: function(e) {
				if (getApp().globalData.userInfo.openId != '') {
					// 判断是否加入了机构
					if(getApp().globalData.userInfo.institutionId) {
						uni.navigateTo({
							url: '../classification/classification?type=' + e
						})
					}else {
						uni.showModal({
							title: '提示',
							content: '请先加入机构',
							success(res) {
								if(res.confirm) {
									uni.navigateTo({
										url: '../institution/institution'
									})
								}
							}
						})
					}
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			getUrl: function() {
				let that = this;
				that.hotClassList = [];
				that.buyClassList = [];
				// that.insInformation.imageUrl = [];
				cloudbase.getTempFileURL({
					fileList: that.fileList
				}).then(res => {
					// console.log(res);
					let list = res.fileList;
					list.forEach(v => {
						// that.hotClassList.push(v.tempFileURL);
						that.buyClassList.push(v.tempFileURL);
					})
					// console.log(that.hotClassList);
					// console.log(that.buyClassList);
					// console.log(that.insInformation.imageUrl)
				})
			},
			// 机构端
			// 跳转至班级管理页面
			jumpToClassManage: function(operationType) {
				console.log(operationType)
				if (getApp().globalData.userInfo.openId != '') {
					uni.navigateTo({
						url: '../class/class?operationType=' + operationType
					})
				} else {
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			// 课程管理
			jumpToAddCourse:function(){
				console.log('跳转')
				if(getApp().globalData.userInfo.openId!=''){
					uni.navigateTo({
						url:'../courseManage/courseManage'
					})
				}
				else{
					uni.navigateTo({
						url:'../login/login'
					})
				}
			},
			getImageUrl: function() {
				let that = this;

				// that.insInformation.imageUrl = [];
				cloudbase.getTempFileURL({
					fileList: that.imageList
				}).then(res => {
					// console.log(res);
					let list = res.fileList;
					// list.forEach(v => {
					// 	that.hotClassList.push(v.tempFileURL);
					// 	that.buyClassList.push(v.tempFileURL);
					// })
					that.imageUrl = list[0].tempFileURL;
					// console.log(that.hotClassList);
					// console.log(that.buyClassList);
					// console.log(that.insInformation.imageUrl)
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	.page {
		width: 750rpx;
		/* height: 1334rpx; */
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	/* 热门课程 */
	.hot {
		width: 702rpx;
		height: 414rpx;
		margin-top: 24rpx;
		margin-left: auto;
		margin-right: auto;

	}

	.hot_title {
		height: 63rpx;
		width: 100%;
		font-size: 45rpx;
		line-height: 63rpx;
		color: #121111;
	}

	.hot_content {
		width: 100%;
		height: 327rpx;
		margin-top: 24rpx;
	}

	.scroll-view_H {
		margin-top: 20rpx;
		white-space: nowrap;
		width: 100%;
	}

	.hot_item {
		width: 553rpx;
		height: 327rpx;
		display: inline-block;
		margin-right: 10rpx;
		background-color: #FFFFFF;
		border-radius: 36rpx;
	}

	.hot_item image {
		width: 553rpx;
		height: 327rpx;
		border-radius: 36rpx;
	}

	/* 课程分类 */
	.classify {
		width: 702rpx;
		height: 197rpx;
		margin-top: 24rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.classify_title {
		height: 63rpx;
		width: 100%;
		font-size: 45rpx;
		line-height: 63rpx;
		color: #121111;
	}

	.classify_content {
		/* height: 134rpx; */
		width: 100%;
		margin-top: 28rpx;
	}

	.classify_item {
		height: 134rpx;
		width: 70rpx;
		margin-left: 39rpx;
		/* background-color: #0000FF; */
		display: inline-block;
		font-size: 17rpx;
		line-height: 24rpx;
		text-align: center;
		color: #666666;
	}

	.classify_item image {
		width: 70rpx;
		height: 70rpx;
	}

	.buyClass {
		width: 702rpx;
		height: 353rpx;
		/* margin-top: 74rpx; */
		margin-left: auto;
		margin-right: auto;
	}

	.buyClass_title {
		width: 100%;
		height: 63rpx;
		font-size: 45rpx;
		line-height: 63rpx;
		color: #121111;
	}

	.buyClass_content {
		width: 100%;
		/* height: 273rpx; */
		margin-top: 17rpx;
	}

	.buyClass_item {
		margin-right: 17rpx;
		border-radius: 10rpx;
		display: inline-block;
		background-color: #FFFFFF;
	}

	.buyClass_item image {
		width: 210rpx;
		height: 297rpx;
		border-radius: 10rpx;
	}



	/* 教研页面 */
	.top image {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.main {
		width: 100%;
		border-radius: 15rpx;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.card {
		width: 602rpx;
		height: 250rpx;
		margin-top: 24rpx;
		margin-right: auto;
		margin-left: auto;
		/* display: flex; */
		background: #FF9400;
		border-radius: 15rpx;
		color: #FFFFFF;
		font-size: 48rpx;
		line-height: 250rpx;
		text-align: center;
	}
</style>
